<template>
  <el-row>
    <el-col :span="24">
      <el-tabs v-model="levelActiveSite" type="card">
        <el-tab-pane label="站点设置" name="site" lazy>
          <div class="siteConfig">
            <el-col :span="18">
              <el-form
                :model="siteForm"
                v-loading="siteLoading"
                :rules="siteRules"
                label-width="192px"
                ref="siteRefs"
                class="siteCls"
              >
                <el-form-item prop="isOpen">
                  <template v-slot:label
                    >站点开启<el-tooltip
                      class="item"
                      effect="dark"
                      content="站点开始|关闭（用于升级等临时关闭）"
                      placement="top-start"
                      ><i class="el-icon-info" /></el-tooltip
                  ></template>
                  <el-radio-group v-model="siteForm.isOpen">
                    <el-radio :label="0">开启</el-radio>
                    <el-radio :label="1">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item prop="webSiteName">
                  <template v-slot:label
                    >网站名称
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="网站名称很多地方会显示的，建议认真填写"
                      placement="top-start"
                      ><i class="el-icon-info" /></el-tooltip
                  ></template>
                  <el-input
                    v-model="siteForm.webSiteName"
                    type="text"
                    placeholder="网站名称很多地方会显示的，建议认真填写"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="webSiteUrl">
                  <template v-slot:label
                    >网站地址
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="网站链接，不要轻易修改"
                      placement="top-start"
                      ><i class="el-icon-info" /></el-tooltip
                  ></template>
                  <el-input
                    v-model="siteForm.webSiteUrl"
                    type="text"
                    placeholder="站点链接，不要轻易修改"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <template v-slot:label
                    >网站描述
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="网站描述"
                      placement="top-start"
                      ><i class="el-icon-info" /></el-tooltip
                  ></template>
                  <el-input
                    v-model="siteForm.webSiteDescription"
                    :rows="2"
                    type="textarea"
                    placeholder="网站描述"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <template v-slot:label
                    >后台LOGO
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="后台LOGO"
                      placement="top-start"
                      ><i class="el-icon-info" /></el-tooltip
                  ></template>
                  <UploadImg height="60" width="60" 
              :guId="guId" :isChangeUpload="true" :type="7" :limit_size="1" 
              :bigBox="true" :newImg="siteForm.logoImage" @change="logoImage" 
              ></UploadImg>
                </el-form-item>
                <el-form-item>
                  <template v-slot:label
                    >后台登录页LOGO
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="后台登录页LOGO，建议尺寸270x75"
                      placement="top-start"
                      ><i class="el-icon-info" /></el-tooltip
                  ></template>
                  <UploadImg height="60" width="60" 
              :guId="guId" :isChangeUpload="true" :type="7" :limit_size="1" 
              :bigBox="true" :newImg="siteForm.logoImage_Login" @change="logoImageLogin" 
              ></UploadImg>
                </el-form-item>
                <el-form-item prop="logoImage_Login_Wap">
                  <template v-slot:label
                    >移动端登录LOGO
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="移动端登录logo，建议png格式(尺寸:180*180)"
                      placement="top-start"
                      ><i class="el-icon-info" /></el-tooltip
                  ></template>
                  <UploadImg height="60" width="60" 
              :guId="guId" :isChangeUpload="true" :type="7" :limit_size="1" 
              :bigBox="true" :newImg="siteForm.logoImage_Login_Wap" @change="logoImageLoginWap" 
              ></UploadImg>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="24">
              <el-col :span="3">
                <el-row type="flex" justify="end">
                  <el-button
                    type="primary"
                    @click="submitAddSite('siteRefs')"
                    :loading="loadingBtn"
                    >提交</el-button
                  >
                </el-row>
              </el-col>
            </el-col>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
import { getSysSiteConfigApi, putSysSiteConfigApi } from "@/api/system";

export default {
  name: "index",
  data() {
    return {
      guId:'00000000-0000-0000-0000-000000000000',
      levelActiveSite:'site',
      loadingBtn: false,
      siteLoading: false,
      siteRules: {
        isOpen: [
          { required: true, message: "请选择站点是否打开", trigger: "change" },
        ],
        webSiteName: [
          { required: true, message: "请填写网站名称", trigger: "change" },
        ],
        webSiteUrl: [
          { required: true, message: "请填写网站地址", trigger: "change" },
        ],
        logoImage_Login_Wap: [
          {
            required: true,
            message: "请上传前台登录页LOGO",
            trigger: "change",
          },
        ],
      },
      siteForm: {
        isOpen: 0,
        webSiteName: "",
        webSiteUrl: "",
        webSiteDescription: "",
        logoImage: "",
        logoImage_Login: "",
        logoImage_Login_Wap: "",
      },
    };
  },
  mounted() {
    this.getSysSiteConfig();
  },
  methods: {
    //后台LOGO
    logoImage(data) {
      this.siteForm.logoImage = data;
      console.log("后台LOGO:", data);
    },
    //后台登录页LOGO
    logoImageLogin(data) {
      this.siteForm.logoImage_Login = data;
      console.log("后台登录页LOGO:", data);
    },
    //移动端登录页LOGO
    logoImageLoginWap(data) {
      this.siteForm.logoImage_Login_Wap = data;
      console.log("移动端登录页LOGO:", data);
    },
    // 删除图片
    delLarge(name) {
      this.$set(this.siteForm, name, "");
    },
    // 大图预览
    largePreview(ref) {
      this.$refs[ref].clickHandler();
    },
    modalPicTap(num, name) {
      console.log(typeof name);

      const _this = this;
      _this.$modalUpload(
        function (img) {
          if (typeof name === "object" && name) {
            _this.$set(_this.siteForm, name.name, img[0].path);
            _this.$refs[name.ref].validateField(name.name);
          } else _this.$set(_this.siteForm, name, img[0].path);
        },
        num,
        "store"
      );
    },
    // 获取商城系统设置
    getSysSiteConfig() {
      this.$set(this, "siteLoading", true);
      getSysSiteConfigApi()
        .then((res) => {
          this.$set(this, "siteForm", res);
          this.$set(this, "siteLoading", false);
        })
        .catch(() => {
          this.$set(this, "siteLoading", false);
        });
    },
    submitAddSite(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$set(this, "loadingBtn", true);
          putSysSiteConfigApi(this.siteForm)
            .then((res) => {
              this.$message.success("修改成功");
              this.getSysSiteConfig();
              this.$set(this, "loadingBtn", false);
            })
            .catch(() => {
              this.$set(this, "loadingBtn", false);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
